<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<scroll-view class="scroll-view_H" scroll-y="true" style="max-height: 1000rpx;">
				<view class="address-data" v-if="buy_shop_switch==2">
					<view class="address-list" @tap='onAddress'>
						<view  v-if="addressInfo">
							<view class="list">
								<text>{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}</text>
							</view>
							<view class="list">
								<text class="address">{{addressInfo.address}}</text>
							</view>
							<view class="list">
								<text>{{addressInfo.name}}</text>
								<text>{{addressInfo.phone}}</text>
							</view>
							<view class="list">
								<text class="tips">(如果快递不方便接收，您可以选择暂时寄存服务)</text>
							</view>
						</view>
						<view class="flex flex-align flex-bt" v-else style="padding-bottom: 30rpx;">
							<view class="left" >设置收货地址</view>
							<view class="rigth">
								<tui-icon name="arrowright" :size="24" color="#999"></tui-icon>
							</view>
						</view>
					</view>
					<view class="bar">
				
					</view>
				</view>
				<view class="ziti" v-else>
					<view class="title">
						<text>社区自提</text>
					</view>
					<view class="zitiList">
						<view class="list flex flex-align">
							<view class="left">提货人</view>
							<view class="inpt"><input type="text" placeholder="请输入提货人" v-model="name" :disabled="isName" /></view>
						</view>
						<view class="list flex flex-align">
							<view class="left">手机号码</view>
							<view class="inpt"><input type="number" placeholder="请输入手机号码" v-model="phone" :disabled="isPhone" /></view>
						</view>
						<view class="lists">
							团长信息：{{dataInfos.name||'请联系管理员'}}
						</view>
						<view class="lists">
							提货地点：{{dataInfos.address||'请联系管理员'}}
						</view>
					</view>
				</view>
				<!-- 商品 -->
				<view class="goods-data">
					<view class="goods-title">
						<text>商品信息</text>
					</view>
					<view class="goods-list">
						<view class="list" v-for="(item,index) in order" :key="index">
							<view class="thumb">
								<image :src="item.goods_cover" mode=""></image>
							</view>
							<view class="item">
								<view class="title">
									<text class="name one-omit">{{item.goods_name}}</text>
									<text class="attr" style="margin-top: 10rpx;">{{item.goods_spec}}</text>
								</view>
								<view class="price-number">
									<!-- <view class="price">
										<text class="min">￥</text>
										<text class="max">{{item.price_selling}}</text>
									</view> -->
									<view class="price" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
										<text class="min">￥</text>
										<text class="max">{{item.price_selling}}<text style="color: #f20;" v-if="dataInfo.balance2!=0">+{{dataInfo.balance2}}<text style="font-size: 24rpx;">礼品卡</text></text></text>
									</view>
									<view class="price" v-if="dataInfo.goods_type==3">
										<text class="max">{{Math.trunc(item.price_selling)}}</text><text style="color: #f20;margin-left: 10rpx;font-weight: 700;">礼品卡</text>
									</view>
									<view class="price" v-if="dataInfo.goods_type==4">
										<text class="max" v-if="item.price_selling!=0">{{item.price_selling}}+</text><text class="max">{{Math.trunc(item.balance3)}}</text><text style="color: #f20;margin-left: 10rpx;font-weight: 700;">红包券</text>
									</view>
									<view class="number">
										<text>x {{item.stock_sales}}</text>
									</view>
								</view>
								<!-- <view class="tag">
									<text>支持七天无理由退货</text>
								</view> -->
							</view>
						</view>
					</view>
					<view class="delivery">
						<div class="list">
							<view class="title">配送</view>
							<view class="content">
								<text>{{buy_shop_switch==2?'快递运输':'自提'}}</text>
								<text class="iconfont icon-more"></text>
							</view>
						</div>
						<div class="list">
							<view class="title">留言</view>
							<view class="content">
								<input type="text" placeholder="选填,建议先和商家沟通确认" style="width: 400rpx;">
							</view>
						</div>
					</view>
				</view>
				<!-- 优惠 -->
				
				<!-- 订单金额 -->
				<view class="order-price">
					<view class="price-list">
						<view class="list">
							<view class="title">
								<text>商品金额</text>
							</view>
							<view class="price" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
								<text class="min">￥</text>
								<text class="max">{{dataInfo.amount_total}}<text  v-if="dataInfo.balance2!=0">+{{dataInfo.balance2}}<text style="font-size: 24rpx;">礼品卡</text></text></text>
							</view>
							<view class="price" v-if="dataInfo.goods_type==3">
								<text class="max">{{Math.trunc(dataInfo.amount_total)}}</text><text style="margin-left: 10rpx;font-weight: 700;font-size: 24rpx;">礼品卡</text>
							</view>
							<view class="price" v-if="dataInfo.goods_type==4">
								<text class="max" v-if="dataInfo.amount_total!=0">{{dataInfo.amount_total}}+</text><text class="max">{{Math.trunc(dataInfo.balance3)}}</text><text style="margin-left: 10rpx;font-weight: 700;font-size: 24rpx;">红包券</text>
							</view>
						</view>
						<view class="list" @click="openQuan" v-if="quanInfo.length!=0&&overlay_coupon!=3">
							<view class="title">
								<text>优惠券</text>
							</view>
							<view class="price">
								<text style="color: #f20;">{{yhqInfo}}</text>
							</view>
						</view>
						<view class="list" v-if="overlay_coupon==3">
							<view class="title">
								<text>优惠券</text>
							</view>
							<view class="price">
								<text style="color: #f20;">- ￥{{dataInfo.coupon_price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="height: 100rpx;"></view>
				<!-- 底部合计提交 -->
				<view class="footer-submit">
					<view class="price" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
						<text class="min">￥</text>
						<text class="max">{{count}}<text style="color: #f20;" v-if="dataInfo.balance2!=0">+{{dataInfo.balance2}}<text style="font-size: 24rpx;">礼品卡</text></text></text>
					</view>
					<view class="price" v-if="dataInfo.goods_type==3">
						<text class="max">{{Math.trunc(dataInfo.amount_real)}}</text><text style="color: #f20;margin-left: 10rpx;font-weight: 700;">礼品卡</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type==4">
						<text class="max" v-if="dataInfo.amount_total!=0">{{dataInfo.amount_total}}+</text><text class="max">{{Math.trunc(dataInfo.balance3)}}</text><text style="color: #f20;margin-left: 10rpx;font-weight: 700;">红包券</text>
					</view>
					<view class="submit" @click="onSubmit">
						<text>提交订单</text>
					</view>
				</view>
				<!-- 发票 -->
				<!-- 优惠券 -->
				<!-- 优惠券 -->
				<view class="page-total">
					<view class="cu-modal bottom-modal" :class="{ show: isShow }" @click="hide()">
						<view class="cu-dialog">
							<view class="coupon-tab flex flex-center">
								<view class="tab action">
									<text>可用优惠券</text>
									<text class="line"></text>
								</view>
							</view>
							<!-- 优惠券数据 -->
							<view class="coupon-data">
								<view class="coupon-list">
									<scroll-view scroll-y="true" style="max-height: 700rpx;padding-bottom: 30rpx;">
										<view class="list" v-for="(item,index) in quanInfo" :key="index" @click.stop="onTab(item)">
											<view class="coupon-price">
												<view class="discounts">
													<text class="min">￥</text>
													<text class="max">{{item.price}}</text>
												</view>
												<view class="full-reduction"><text>满{{item.full_price}}元减{{item.price}}元</text></view>
												<view class="jag"></view>
											</view>
											<view class="coupon-info">
												<view class="check">
													<view :class="item.checked?'iconfont icon-checked':'iconfont icon-check'"></view>
												</view>
												<view class="info-title">
													<view class="tag">
														<text>限品类券</text>
													</view>
													<view class="title">
														<text>仅可购买会员专区商品</text>
													</view>
												</view>
												<view class="date-get">
													<view class="date">
														<text>结束时间:{{item.end_time}}</text>
													</view>
													<!-- <view class="get">
														<text>点击领取</text>
													</view> -->
												</view>
											</view>
										</view>
									</scroll-view>
									
								</view>
							</view>
							<!--确认 -->
							<view class="cpupon-confirm">
								<view class="confirm" @click.stop="onConfirm">确定</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
		</tui-bottom-popup>
	</view>
</template>

<script>
	import webUni from "@/common/uni.webview.js"
	export default {
		name: 'tConfirmOrder',
		props: {
			//控制显示
			show: {
				type: Boolean,
				default: false
			},
			id: {
				type: String,
				default:''
			},
			
			
		},
		data() {
			return {
				addressInfo:'',
				code:'',
				dataInfo:'',
				order:[],
				quanInfo:[],
				yhqContent:'',
				yhqInfo:'请选择优惠券',
				count:0,
				buy_shop_switch:'',
				dataInfos:'',
				name:'',
				phone:'',
				type:'',
				isName:false,
				isBtn:false,
				userId:'',
				pay_switch:'',
				isShow:false,
				overlay_coupon:'',
				isPhone:false,
				userinfo:'',
				modal:false,
				coupon_price_max:'',
				prices:0
			};
		},
		created() {
		    console.log('组件实例创建之后');
			let that = this
			that.isBtn =false
			uni.$on('isaddress', function(data) {
				that.getAddress()
			});
			uni.$on('isbtn', function(data) {
				that.isBtn = false
			});
		},
		destroyed() {
			uni.$off('isbtn');
			console.log('组件实例销毁之后');
			uni.$off('isaddress');
		},
		
		methods: {
			close() {
				this.$emit("close", {})
				this.dataInfo = ''
			},
			hide(){
				this.isShow = false;
			},
			onAddress() {
				if(this.addressInfo){
					uni.navigateTo({
						url: '/pages/AddressList/AddressList'
					})
				}else{
					uni.navigateTo({
						url: '/pages/AddressEdit/AddressEdit'
					})
				}
			},
			getInfo(){
				let that = this
				that.tui.request("api.auth.center/get", "POST", {}, false, false, true).then((res) => {
					if (res.code == 1) {
						if(res.data.community_pid){
							that.dataInfos = res.data.community_pid
						}
						that.buy_shop_switch = res.data.buy_shop_switch
						if(res.data.username!=''){
							that.name = res.data.username
							that.isName = true
						}else{
							that.isName = false
						}
						if(res.data.phone!=''){
							that.phone = res.data.phone
							that.isPhone = true
						}else{
							that.isPhone = false
						}
						that.pay_switch = res.data.pay_switch
						that.userId = res.data.pay_new_switch
						if(that.buy_shop_switch==2){
							that.getAddress()
						}
						that.userinfo = res.data
					}
				}).catch((res) => {
				
				})
			},
			getAddress(){
				let that = this
				that.tui.request("api.auth.address/get", "GET", {page:1}, false,false, true).then((res) => {
					that.addressInfo = res.data.list[0]
				}).catch((res) => {})
			},
			getdata(e){
				let that = this
				that.code = e
				that.tui.request("api.auth.order/orderDetail", "post", {order_no:e}, false, true, false).then((res) => {
					console.log(res)
					that.dataInfo = res.data.info
					that.order = res.data.info.order
					that.getQuan()
				}).catch((res) => {})
			},
			getQuan(){
				let that = this
				that.tui.request("api.auth.order/couponOrderList", "GET", {code:that.dataInfo.order[0].goods_code,number:that.dataInfo.number_goods,goods_sku:that.dataInfo.order[0].goods_spec}, false,false, true).then((res) => {
					res.data.list.map((item)=>{
						item.checked = false
					})
					that.quanInfo = res.data.list
					that.overlay_coupon = res.data.overlay_coupon
					that.coupon_price_max = res.data.coupon_price_max
					if(that.overlay_coupon==3){
						that.count = that.dataInfo.amount_real
					}else{
						that.count = that.dataInfo.amount_total
					}
				}).catch((res) => {})
			},
			onConfirm(){
				this.isShow = false
				let price = this.prices
				this.yhqContent = ''
				this.quanInfo.map((item,index)=>{
					if(item.checked){
						this.yhqContent =item.id+','+this.yhqContent
					}
				})
				if(this.yhqContent == ''){
					price = 0
				}
				if(price!=0){
					if(price>=this.dataInfo.amount_total){
						this.yhqInfo ="-"+this.dataInfo.amount_total+"元"
					}else{
						this.yhqInfo ="-"+price.toFixed(2)+"元"
					}
					this.count = (this.dataInfo.amount_total-price).toFixed(2)
					if(this.count<0){
						this.count = 0
					}
				}else{
					this.yhqInfo ="请选择优惠券"
					this.count = this.dataInfo.amount_total
				}
				
			},
			openQuan(){
				if(this.quanInfo.length==0){
					return
				}
				this.isShow = true
			},
			onTab(index){
				let that = this
				let data = that.quanInfo
				if(that.overlay_coupon==2){
					if(!index.checked){
						if((parseFloat(that.prices) + parseFloat(index.price))>that.coupon_price_max){
							that.tui.toast('已超过最大使用金额'+that.coupon_price_max+' 请重新选择')
							return
						}else{
							that.prices = parseFloat(that.prices) + parseFloat(index.price)
						}
					}else{
						that.prices = parseFloat(that.prices) - parseFloat(index.price)
					}
				}else if(that.overlay_coupon==1){
					that.prices =parseFloat(index.price)
				}
				data.map((item)=>{
					if(that.overlay_coupon==1){
						if(index.id==item.id){
							item.checked = true
						}else{
							item.checked = false
						}
					}else if(that.overlay_coupon==2&&index.id==item.id){
						item.checked = !item.checked
					}
				})
				that.quanInfo = data
				that.$forceUpdate()
			},
			onSubmit(){
				let that = this
				if(that.isBtn){
					return
				}
				that.isBtn = true
				uni.showLoading()
				if(!that.addressInfo&&that.buy_shop_switch==2){
					that.tui.toast("请先填写收货地址")
					setTimeout(function(){
						uni.navigateTo({
							url: '/pages/AddressEdit/AddressEdit'
						})
					},1000)
					return
				}
				let zhifuNum = ''
				if(!that.tui.isValidPhoneNumber(that.phone)&&that.buy_shop_switch==1){
					that.tui.toast("手机号格式有误")
					that.isBtn = false
					return
				}
				let goods_type = that.dataInfo.goods_type
				if(that.dataInfo.goods_type==4&&that.dataInfo.amount_total!=0){
					goods_type = 2
				}
				that.tui.request("api.auth.order/perfect", "post", {order_no:that.code,code:that.addressInfo.code,coupon_id:that.yhqContent,address_name:that.name,address_phone:that.phone}, false,false, true).then((res) => {
					if(res.code==1){
						that.tui.request("api.auth.order/payment", "post", {order_no:res.data.order_no,payment_code:goods_type==3?'M8052888745606631252':goods_type==4?"M8219770040717089068":goods_type==2?that.userId:''}, false,false, true).then((ddd) => {
							console.log(ddd)
							// that.tui.toast('支付成功')
							uni.hideLoading()
							if(ddd.code==1){
								if(goods_type==3){
									that.tui.toast('支付成功')
									that.$emit("finish", {'zhifu':"礼品卡",'type':2})
									that.isBtn = false
									that.yhqInfo ="请选择优惠券"
								}else if(goods_type==4){
									that.tui.toast('支付成功')
									that.$emit("finish", {'zhifu':"红包券",'type':2})
									that.isBtn = false
									that.yhqInfo ="请选择优惠券"
								}else{
									if(ddd.data.type==2){
										that.tui.toast('支付成功')
										that.$emit("finish", {'zhifu':"优惠券抵扣",'type':2})
										that.isBtn = false
										that.yhqInfo ="请选择优惠券"
									}else{
										// #ifdef MP
										uni.requestPayment({
											timeStamp: ddd.data.param.timeStamp,
											nonceStr: ddd.data.param.nonceStr,
											package: ddd.data.param.package,
											signType: ddd.data.param.signType,
											paySign: ddd.data.param.paySign,
										    success: function (res) {
										        console.log('success:' + JSON.stringify(res));
												setTimeout(function(){
													uni.redirectTo({
														url:'/pages/PayResult/PayResult?price='+that.count+"&zhifu=微信支付&goods_type=1",
													})
													that.isBtn = false
												},1000)
										    },
										    fail: function (err) {
										        console.log('fail:' + JSON.stringify(err));
												that.isBtn = false
										    }
										});
										// #endif
										// #ifdef H5
										console.log(res.data)
										if(that.pay_switch==5){
											// that.$emit("finish", {'url':ddd.data.param.url,'type':1})
											window.location.href = ddd.data.param.url;
											
										}else if(that.pay_switch==6){
											
											uni.setStorageSync('isZhifu',ddd.data.param)
											// that.$emit("finish", {'url':ddd.data.param.url,'type':1})
											window.location.href = ddd.data.param.url;
										
										}else{
											function onBridgeReady() {
												WeixinJSBridge.invoke(
													'getBrandWCPayRequest', {
														"appId": ddd.data.param.appId, //公众号名称，由商户传入     
														"timeStamp": ddd.data.param.timeStamp, //时间戳，自1970年以来的秒数     
														"nonceStr": ddd.data.param.nonceStr, //随机串     
														"package": ddd.data.param.package,
														"signType": ddd.data.param.signType, //微信签名方式：     
														"paySign": ddd.data.param.paySign, //微信签名 
													},
													function(res) {
														if (res.err_msg == "get_brand_wcpay_request:ok") {
															that.$emit("finish", {'zhifu':"微信支付",'type':2})
															that.isBtn = false
															that.yhqInfo ="请选择优惠券"
															// 使用以上方式判断前端返回,微信团队郑重提示：
															// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
														}else{
															that.isBtn = false
														}
														
													});
											}
											if (typeof WeixinJSBridge == "undefined") {
												if (document.addEventListener) {
													document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
												} else if (document.attachEvent) {
													document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
													document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
												}
											} else {
												onBridgeReady();
											}
										}
										
										// #endif
									}
								}
							
							}else{
								setTimeout(function(){
									uni.redirectTo({
										url:'/pages/shop/order_list?type=1'
									})
									that.isBtn = false
								},1000)
							}
						}).catch((res) => {
							that.isBtn = false
						})
					}else{
						that.isBtn = false
					}
					
					
				}).catch((res) => {
					that.isBtn = false
				})
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.ziti{background: #fff;border-top: 2px solid #eee;
		.title{border-bottom: 2px solid $base;
			text{padding: 20rpx 40rpx;background: $base;color: #fff;display: inline-block;}
		}
		.zitiList{padding-bottom: 20rpx;padding-top: 10rpx;
			.list{padding: 0rpx 30rpx;height: 80rpx;margin: 30rpx 0;
			.inpt{width: 100%;}
				input{background: #f7f7f7;width: 100%;height: 80rpx;padding-left: 20rpx;}
				.left{width: 150rpx;}
			}
			.lists{padding: 0rpx 30rpx 10rpx 30rpx;color: #999;}
		}
	}
	/* 地址 */
	.address-data{
		position: relative;
		padding: 10rpx 4%;
		background-color: #FFFFFF;
		border-radius: 0 0 20rpx 20rpx;
		overflow: hidden;
		
		.bar{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 10rpx;
			background-color: #CCCCCC;
			background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
			background-size: 72rpx 72rpx;
		}
		.address-list{
			width: 100%;
			.list{
				display: flex;
				align-items: center;
				width: 100%;
				height: 60rpx;
				text{
					font-size: 24rpx;
					color: #555555;
					margin-right: 10rpx;
				}
				.address{
					font-size: 32rpx;
					color: #222222;
				}
				.tips{
					color: $base;
				}
			}
		}
	}
	/* 商品 */
	.goods-data{
		padding: 10rpx 4%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		.goods-title{
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			text{
				font-size: 26rpx;
				color: #222222;
			}
		}
		.goods-list{
			width: 100%;
			.list{
				display: flex;
				align-items: center;
				width: 100%;
				height: 200rpx;
				.thumb{
					display: flex;
					align-items: center;
					width: 30%;
					height: 100%;
					image{
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}
				}
				.item{
					width: 70%;
					height: 160rpx;
					.title{
						display: flex;
						flex-direction: column;
						// justify-content: center;
						width: 100%;
						height: 80rpx;
						.name{
							font-size: 28rpx;
							color: #222222;
						}
						.attr{
							font-size: 24rpx;
							color: #C0C0C0;
						}
					}
					.price-number{
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;
						height: 60rpx;
						.price{
							display: flex;
							align-items: center;
							text{
								color: $base;
								font-weight: bold;
							}
							.min{
								font-size: 26rpx;
							}
							.max{
								font-size: 32rpx;
							}
						}
						.number{
							display: flex;
							align-items: center;
							text{
								font-size: 26rpx;
								color: #222222;
							}
						}
					}
					.tag{
						display: flex;
						align-items: center;
						width: 100%;
						height: 40rpx;
						text{
							padding: 2rpx 12rpx;
							color: $base;
							border: 2rpx solid $base;
							border-radius: 40rpx;
							font-size: 24rpx;
						}
					}
				}
			}
		}
		.delivery{
			width: 100%;
			.list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 80rpx;
				.title{
					font-size: 26rpx;
					color: #555555;
				}
				.content{
					display: flex;
					align-items: center;
					height: 40rpx;
					text{
						font-size: 26rpx;
						color: #222222;
					}
					.iconfont{
						// font-size: 24rpx;
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
					.icon-check{
						font-size: 34rpx;
					}
					input{
						height: 80%;width: 100%;
						font-size: 26rpx;
						color: #222222;
						text-align: right;
					}
				}
			}
		}
	}
	/* 优惠 */
	.discounts-data{
		width: 100%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.discounts{
			padding: 0 4%;
			.list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 80rpx;
				.title{
					font-size: 26rpx;
					color: #555555;
				}
				.content{
					display: flex;
					align-items: center;
					height: 40rpx;
					text{
						font-size: 26rpx;
						color: #222222;
					}
					.iconfont{
						// font-size: 24rpx;
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
					.icon-check{
						font-size: 34rpx;
					}
					input{
						height: 80%;
						font-size: 26rpx;
						color: #222222;
						text-align: right;
					}
				}
			}
		}
	}
	/**
	 * 地址提示
	 */
	.address-tips{
		position: fixed;
		left: 0;
		bottom: 100rpx;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 60rpx;
		padding: 0 4%;
		background-color: #fef2ce;
		text{
			font-size: 26rpx;
			color: #fbbd08;
		}
	}
	/* 订单金额 */
	.order-price{
		width: 100%;
		margin: 20rpx auto;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.price-list{
			padding: 0 4%;
			.list{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 80rpx;
				.title{
					display: flex;
					align-items: center;
					text{
						font-size: 26rpx;
						color: #555555;
					}
				}
				.price{
					display: flex;
					align-items: center;
					text{
						font-size: 26rpx;
						font-weight: bold;
						color: #222222;
					}
					.highlight{
						color: $base;
					}
				}
			}
		}
	}
	
	/* 顶部合计提交 */
	.footer-submit{
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		padding: 0 4%;
		.price{
			display: flex;
			align-items: flex-end;
			text{
				font-weight: bold;
				color: $base;
			}
			.min{
				font-size: 32rpx;
			}
			.max{
				font-size: 48rpx;
			}
		}
		.submit{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 70rpx;
			background-color: $base;
			border-radius: 70rpx;
			text{
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
	.cu-dialog{
		width: 100%;
		border-radius: 20rpx 20rpx 0 0 !important;
		background-color: #f6f6f6 !important;
		.coupon-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 4%;
			height: 100rpx;
			background-color: #FFFFFF;
			.title{
				font-size: 32rpx;
				color: #222222;
			}
			.explain{
				font-size: 26rpx;
				color: #959595;
			}
		}
		.coupon-tab{
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			background-color: #FFFFFF;
			.tab{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 100%;
				text{
					font-size: 26rpx;
					color: #555555;
				}
				.line{
					display: none;
					position: absolute;
					left: 50%;
					bottom: 10rpx;
					width: 60rpx;
					height: 7rpx;
					background: linear-gradient(to right,$base,#f6f6f6);
					transform: translate(-50%,0);
				}
			}
			.action{
				text{
					color: #222222;
				}
				.line{
					display: block;
				}
			}
		}
		// 优惠券数据
		.coupon-data{
			padding: 20rpx 4% 100rpx;
			overflow: auto;
			.coupon-list{
				width: 100%;
				.list{
					position: relative;
					display: flex;
					align-items: center;
					width: 100%;
					height: 200rpx;
					box-shadow: 0 0 14rpx rgba(0,0,0,0.1);
					border-radius: 6rpx;
					margin-bottom: 20rpx;
					background-color: #FFFFFF;
					overflow: hidden;
					.coupon-price{
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 30%;
						height: 100%;
						background-color: $base;
						.discounts{
							display: flex;
							justify-content: center;
							align-items: flex-end;
							width: 100%;
							.min{
								color: #FFFFFF;
								font-size: 32rpx;
								font-weight: bold;
							}
							.max{
								font-size: 48rpx;
								color: #FFFFFF;
								font-weight: bold;
							}
						}
						.full-reduction{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 100%;
							height: 60rpx;
							text{
								font-size: 24rpx;
								color: #FFFFFF;
							}
						}
						.jag{
							position: absolute;
							top: 0;
							left: -6rpx;
							width: 6px;
							height: 100%;
							background-size: 10px 6px;
							background-color: #fff;
							background-position: 100% 35%;
							background-image: linear-gradient(-45deg, $base 25%, transparent 25%, transparent), 
															linear-gradient(-135deg, $base 25%, transparent 25%, transparent), 
															linear-gradient(-45deg, transparent 75%, $base 75%), 
															linear-gradient(-135deg, transparent 75%, $base 75%);
						}
					}
					.coupon-info{
						position: relative;
						width: 70%;
						height: 90%;
						padding: 0 4%;
						.check{
							position: absolute;
							right: 20rpx;
							top: 50%;
							width: 50rpx;
							height: 50rpx;
							transform: translate(0,-50%);
							.iconfont{
								font-size: 36rpx;
								color: #f20;
							}
						}
						.info-title{
							display: flex;
							width: 100%;
							height: 100rpx;
							.tag{
								margin-right: 10rpx;
								text{
									padding: 4rpx 16rpx;
									color: #FFFFFF;
									background-color: $base;
									font-size: 24rpx;
									border-radius: 40rpx;
								}
							}
							.title{
								text{
									font-size: 24rpx;
									color: #212121;
								}
							}
						}
						.date-get{
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 100%;
							height: 80rpx;
							.date{
								display: flex;
								align-items: center;
								text{
									font-size: 24rpx;
									color: #555555;
								}
							}
							.get{
								text{
									padding: 10rpx 20rpx;
									background-color: $base;
									color: #FFFFFF;
									font-size: 24rpx;
									border-radius: 100rpx;
								}
								.use{
									background-color: transparent;
									border: 1px solid $base;
									color: $base;
								}
							}
						}
					}
					.use-status{
						position: absolute;
						right: -20rpx;
						top: -25rpx;
						z-index: 10;
						width: 100rpx;
						height: 100rpx;
						border: 2rpx solid #C0C0C0;
						border-radius: 100%;
						text{
							display: inline-block;
							color: #C0C0C0;
							font-size: 24rpx;
							transform: rotate(45deg);
							margin-top: 40rpx;
						}
					}
				}
				// 不可用样式
				.forbidden{
					.coupon-price{
						background-color: #CCCCCC;
						.jag{
							background-image: linear-gradient(-45deg, #CCCCCC 25%, transparent 25%, transparent),
															linear-gradient(-135deg, #CCCCCC 25%, transparent 25%, transparent), 
															linear-gradient(-45deg, transparent 75%, #CCCCCC 75%), 
															linear-gradient(-135deg, transparent 75%, #CCCCCC 75%);
						}
					}
					.coupon-info{
						.info-title{
							.title{
								text{
									color: #CCCCCC;
								}
							}
							.tag{
								text{
									background-color: #CCCCCC;
								}
							}
						}
						.date-get{
							.date{
								text{
									color: #CCCCCC;
								}
							}
						}
					}
				}
			}
		}
		// 确认
		.cpupon-confirm{
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF;
			.confirm{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90%;
				height: 70%;
				font-size: 26rpx;
				color: #FFFFFF;
				background-color: $base;
				border-radius: 100rpx;
			}
		}
	}
</style>